<template>
  <div id="manual-time-card">
    <div class="title">Manual Time Card</div>
    <div class="content">
      <div class="employee-info-content">
        <div class="avatar-content">
          <img class="avatar-img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1179812116,2860490131&fm=23&gp=0.jpg"/>
        </div>
        <div class="info-content">
          <div class="name"><router-link class="link" to="/views/org/employee/employeeDetail/42594514884126">Nicole Herrera</router-link></div>
          <div class="org"><label class="label">Org：</label> Sales</div>
          <div class="job"><label class="label">Job Title：</label> Sales Engineer</div>
        </div>
      </div>
      <div class="table-content">
        <div class="table-title">{{tableTitle}}</div>


      <table class="manual-table">
          <tr class="manual-header-row">
            <td>Hours Type</td>
            <td v-for="(item,key) in dateList">{{item.label}}</td>
            <td>Job Totals</td>
          </tr>
          <tbody v-for="(type,typeKey) in hoursType" :key="typeKey">
          <tr v-for="i in typeMaxLength[type]" v-if="recordModel">
            <td>
              {{type}}
            </td>
            <td class="manual-record-cell" v-for="(data,key) in dateData" :key="key">
              <div class="edit-item">
                <input class="record-input" v-model="recordModel[key+type][i-1].hours"  type="number"   max="24"  @change="recordChange($event,type,key,i)">
              </div>
            </td>
            <td>{{getRowTotals(type,i)}}</td>
          </tr>
          </tbody>
          <tr v-if="dateData.length">
            <td class="manual-item-total warning">Totals</td>
            <td class="manual-item-total" :class="{warning:getColumnTotals(key)>8}" v-for="(data,key) in dateData" :key="key">
              {{getColumnTotals(key)}}
            </td>
            <td class="manual-item-total" :class="{warning:getTotals()>40}">{{getTotals()}}</td>
          </tr>
        </table>
      </div>
      <div class="footer">
        <button v-touch-ripple type="button">Reset</button> <button v-touch-ripple  type="button">Cancel</button> <button v-touch-ripple class="active"  type="button">Save</button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'ManualTimeCard',
  components:{

  },
  created(){
  	this.init();
  },
  computed:{
    tableTitle(){
      return moment(this.beginDate).format('MMM,Do') + ' - ' + moment(this.endDate).format('MMM,Do');
    },
    manualData(){
      return this.$store.getters.manualData;
    },
  },
  watch:{
    manualData:function (value) {
      this.initManualColumns();
    },
    selectDate(value){
      this.beginDate = moment(value).startOf('week').format('YYYY-MM-DD');
      this.endDate = moment(value).endOf('week').format('YYYY-MM-DD');
      var dateList = [];
      for(var i=0;i<7;i++){
        dateList.push({
          key:moment(value).startOf('week').add(i,'days').format('YYYY-MM-DD'),
          label:moment(value).startOf('week').add(i,'days').format('ddd M/D'),
        })
      }
      this.dateList = dateList;
      this.getManualData();
    }
  },
  data () {
    return {
      selectDate:null,
      typeMaxLength:{},
      initRecordModel:null,//原始数据
    	recordModel:null,//更改数据model
      hoursType:[],//type ['work','sick' ....]
      commitData:[],//待提交数据
      dateList:[],
      dateData:[],
      employeeId:null,
      beginDate:null,
      endDate:null,
      addRow:[]
    }
  },
  methods:{
  	init(){
  		var now = moment();
  		this.selectDate = moment().format('YYYY-MM-DD');
    },
    initManualColumns(){
  		this.hoursType = Object.keys(this.manualData['Total Hours']);
  		this.dateData = this.formatDateData(this.manualData.records);
      this.typeMaxLength = this.getTypeMaxLength();
  		this.initModel();
  		this.initAddRowModel();
    },
    formatDateData(dateData){
      var obj = {};
      for(var i in dateData){
        obj[dateData[i].fullDate] = dateData[i];
      }
      return obj;
    },
    getTypeMaxLength(){
      var typeMaxLength = {};
      var types = this.hoursType;
      var data = this.dateData;
      for(var i = 0;i<types.length;i++){
        typeMaxLength[types[i]] = 1;
        for(var j in data){
          typeMaxLength[types[i]] = Math.max(typeMaxLength[types[i]],data[j][types[i]].length);
        }
      }
      return typeMaxLength;
    },
    initModel(){
    	var t = this;
    	var recordModel = {};
    	for(var type in this.typeMaxLength){
        for(var j=0;j< this.typeMaxLength[type];j++){
          for(var k=0;k<this.dateList.length;k++){
            var dateItem = this.dateList[k].key;
            if(!recordModel[dateItem+type]){
              recordModel[dateItem+type] = []
            }
          if(this.dateData[dateItem][type].length>j){

            recordModel[dateItem+type][j] ={
              employeeId:0,//待改,
              timesheetId:this.dateData[dateItem][type][j].timesheetId,
              hours:this.dateData[dateItem][type][j].hours
            }
          }else{
             recordModel[dateItem+type][j] ={
                employeeId:0,//待改,
                manualType:type,
                date:dateItem,
                hours:""
              }
            }
          }
        }
      }
      t.recordModel = recordModel;
      t.initRecordModel = JSON.parse(JSON.stringify(recordModel));
    },
    initAddRowModel(){

    },
    getTotalsNum(obj){
    	var totals = 0;
      for(var i in obj){
      	totals += obj[i];
      }
      return totals;
    },
    getTypeTotals(type){
    	var t = this;
      var total = 0;
      for(var i in  t.recordModel[type]){
        total += Number(t.recordModel[type][i]);
      }
      return  total;
    },
    getAllTotals(){
      var t = this;
      var total = 0;
      for(var i in  t.recordModel){
      	for(var j in t.recordModel[i]){
          total += Number(t.recordModel[i][j]);
        }
      }
      return  total;
    },
    getRowTotals(type,index){
      var t = this;
      var total = 0;
      for(var i=0;i<t.dateList.length;i++){
        var hours = t.recordModel[t.dateList[i].key + type][index-1].hours;
        hours = hours || 0;
        total += parseFloat(hours) ;
      }
      return  total;
    },
    getColumnTotals(date){
      var t = this;
      var total = 0;
      for(var i =0;i<t.hoursType.length;i++){
        var items = t.recordModel[date + t.hoursType[i]];
        for(var j=0;j<items.length;j++){
          var hours = items[j].hours;
          hours = hours || 0;
          total += parseFloat(hours) ;
        }
      }
      return total;
    },
    getTotals(){
      var t = this;
      var total = 0;
      for(var i in t.recordModel){
        for(var j=0;j<t.recordModel[i].length;j++){
          var hours = t.recordModel[i][j].hours;
          hours = hours || 0;
          total += parseFloat(hours) ;
        }
      }
      return total;
    },
    recordChange(e,type,date,index){
      var value = e.target.value;
      value == "" && ( this.recordModel[date+type][index-1].hours = 0);
      value > 24 && (this.recordModel[date+type][index-1].hours = 24);
      if(value != this.initRecordModel[date+type][index-1].hours){
        e.target.classList.add('change-input');
      }else{
        e.target.classList.remove('change-input');
      }
    },
    getManualData(){
  		var t = this;
  		this.$store.dispatch('getManualData',{employeeId:0});
    }
  }
}
</script>


<style  rel="stylesheet/scss" type="text/css" lang="scss" >
  @import "src/assets/css/variable.scss";
  #manual-time-card{
    >.title{

    }
    >.content{
      .employee-info-content{
        display: flex;
        box-sizing: border-box;
        width: 100%;
        height: 60px;
        padding: 13px 0px 52px 40px;
        margin-bottom: 56px;
        >.avatar-content{
          flex: 0;
          .avatar-img{
            width: 68px;
            height: 68px;
            border-radius: 50%;
            margin-right: 31px;
          }
        }
        >.info-content{
          flex: 1;
          >.name{
            .link{
              /*font-family: PingFangTC-Medium;*/
              font-size: 18px;
              color: #009AFF;
              border-bottom: 1px $baseColor solid;
              margin-bottom: 4px;
            }
          }
          >.org,.job{
            margin-bottom: 4px;
           /* font-family: PingFangTC-Regular;*/
            font-size: 14px;
            color: #14252E;
            >.label{
              color: #96ACB9;
            }
          }
        }
      }
      /*table*/
      .table-content{
        margin-bottom: 60px;
        >.table-title{
          width: 100%;
          height: 60px;
          line-height: 60px;
         /* font-family: PingFangTC-Medium;*/
          font-size: 18px;
          color: #325570;
          text-align: center;
          border: 1px $baseBorderColor solid;
          border-bottom: 0;
          background-color: #f1f8ff;
        }
        .manual-table{
          width:100%;
          border-right:1px $baseBorderColor solid;
          .manual-header-row{
            font-size: 14px;
            color: #96ACB9;
          }
          td{
            border-bottom:1px $baseBorderColor solid;
            border-left: 1px $baseBorderColor solid;
            width: 150px;
            height: 40px;
            line-height:40px;
            text-align:center;
            vertical-align: center;
            &.manual-item-total{
              font-size: 16px;
              &.warning{
                color: $baseColor;
              }
            }
            &.manual-record-cell{
              vertical-align: top;
              .record-input{
                width: 100%;
                height: calc(100% - 1px);
                padding: 0 12px;
                border: 0;
                outline: 0;
                text-align: center;
                &.change-input{
                  border: 1px #FF7123 solid;
                  color:#FF7123;
                }
              }
            }
            .edit-item{
              height: 40px;
              border-bottom: 1px #ddd solid;
              &:last-child{
                border-bottom: 0;
              }
            }
          }
        }

      }
      /*footer*/

      .footer{
        text-align: right;
        button{
          width: 100px;
          height: 38px;
          margin-left: 30px;
          font-size: 16px;
          color: #96ACB9;
          background-color: #fff;
          border: 1px solid $baseBorderColor;
          border-radius: 4px;
          outline: 0;
          cursor: pointer;
          &.active{
            background-color: $baseColor;
            color: #fff;
            border: 0;
          }
          &:hover{
            opacity: .7;
          }
        }
      }
    }
  }
</style>
